<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        form div {
            height: 40px;
            line-height: 40px;
        }
        
        form div:nth-child(4) {
            height: auto;
        }
        
        form div span:first-child {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action="http://itcast.cn">
            <div>
                <span>姓名：</span>
                <span>
            <input type="text" v-model="uname" />
          </span>
            </div>
            <div>
                <span>性别：</span>
                <span>
            <input type="radio" id="male" value="nan" v-model="gender" />
            <label for="male">男</label>
            <input type="radio" id="female" value="nv" v-model="gender" />
            <label for="female">女</label>
          </span>
            </div>
            <div>
                <span>爱好：</span>
                <input type="checkbox" id="ball" value="篮球" v-model="hobby" />
                <label for="ball">篮球</label>
                <input type="checkbox" id="sing" value="唱歌" v-model="hobby" />
                <label for="sing">唱歌</label>
                <input type="checkbox" id="code" value="写代码" v-model="hobby" />
                <label for="code">写代码</label>
            </div>
            <div>
                <span>职业：</span>
                <select v-model="occupation " multiple>
            <option value="0">请选择职业...</option>
            <option value="1">教师</option>
            <option value="2">软件工程师</option>
            <option value="3">律师</option>
          </select>
            </div>
            <div>
                <span>个人简介：</span>
                <textarea v-model="desc"></textarea>
            </div>
            <div>
                <input type="submit" value="提交" @click.prevent="handle" />
            </div>
        </form>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                gender: '',
                hobby: [],
                occupation: ['1', '2'],
                desc: '你好，请输入',
            },
            methods: {
                handle: function() {
                    // console.log(this.uname);
                    // console.log(this.gender);
                    console.log(this.hobby);
                    console.log(this.occupation);
                },
            },
        });
    </script>
</body>

</html>